<template>
    <div id="app">
        <!--
            子向父传递不在通过父级定义一个方法通过props传递给子组件,
            而是用自定义事件将父组件的方法绑定, 子组件中通过 this.$emit()调用事件, 从而触发父组件中的方法

            父向子传递还是直接使用props
         -->
        <!-- <MyHeader :handle-receive="handleReceive"></MyHeader> -->
        <MyHeader @handleReceive="handleReceive"></MyHeader>
<!--        <MyList :table-data="tableData"-->
<!--                :handle-checked-table-data="handleCheckedTableData"-->
<!--                :handle-delete-data="handleDeleteData"-->
<!--        ></MyList>-->
        <MyList :table-data="tableData"></MyList>
        <!-- :check-all-todo="checkAllTodo"-->
        <!-- :handle-clear-all="handleClearAll"-->
        <MyFooter :todos="tableData"
                  @checkAllTodo="checkAllTodo"
                  @handleClearAll="handleClearAll"
        ></MyFooter>
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    import MyList from './components/MyList.vue'
    import MyFooter from './components/MyFooter.vue'

    export default {
        name: 'App',
        components: {
            MyHeader,
            MyList,
            MyFooter
        },
        data() {
            return {
                tableData: JSON.parse(localStorage.getItem('tableData')) || []
            }
        },
        methods: {
            handleReceive(message) {
                this.tableData.unshift(message)
            },
            /* 原始的组件间通信处理tableData的选中事件, 原始通信就是一层一层逐级传递
                App -> MyList -> MyItem
                通过props将父组件的方法传递给子组件
                (子组件向父组件通信的方式, 因为是子组件点击修改父组件的data数据) */
            handleCheckedTableData(todoId) {
                this.tableData.forEach(item => {
                    if (item.id === todoId)
                        item.done = !item.done
                })
            },
            handleDeleteData(todoId) {
                this.tableData = this.tableData
                    .filter(item => item.id != todoId)
            },
            handleEditData(todoId, todoValue) {
                this.tableData.some(item => {
                    if (item.id === todoId) {
                        item.title = todoValue
                        return true
                    }
                })
            },
            /* 控制全选和全部选 */
            checkAllTodo(value) {
                this.tableData.forEach(it => {
                    it.done = value
                })
            },
            handleClearAll() {
                this.tableData = this.tableData.filter(it => {
                    return it.done === false
                })
            }
        },
        watch: {
            tableData: {
                deep: true,
                handler(value) {
                    localStorage.setItem('tableData', JSON.stringify(value))
                }
            }
        },
        mounted() {
            this.$bus.$on('handleCheckedTableData', this.handleCheckedTableData)
            this.$bus.$on('handleDeleteData', this.handleDeleteData)
            this.$bus.$on('handleEditData', this.handleEditData)
        },
        beforeDestroy() {
            this.$bus.$off('handleCheckedTableData')
            this.$bus.$off('handleDeleteData')
            this.$bus.$off('handleEditData', this.handleEditData)
        }
    }
</script>

<style>

</style>
